<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>公交系统</title>
    <!-- 图标 -->
    <link rel="shortcut icon" href="../static/web/images/favicon.ico" th:href="@{/web/images/favicon.ico}" type="image/x-icon" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/web/css/bootstrap.min.css" th:href="@{/web/css/bootstrap.min.css}">
    <!--  CSS -->
    <link rel="stylesheet" href="../static/web/style.css" th:href="@{/web/style.css}">
    <!-- 颜色 CSS -->
    <link rel="stylesheet" href="../static/web/css/colors.css" th:href="@{/web/css/colors.css}">
    <!-- ALL VERSION CSS -->
    <link rel="stylesheet" href="../static/web/css/versions.css" th:href="@{/web/css/versions.css}">
    <!-- 响应式 CSS -->
    <link rel="stylesheet" href="../static/web/css/responsive.css" th:href="@{/web/css/responsive.css}">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="../static/web/css/custom.css" th:href="@{/web/css/custom.css}">
    <!-- Modernizer for Portfolio -->
    <script src="../static/web/js/modernizer.js" th:src="@{/web/js/modernizer.js}"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" th:src="@{https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js}"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" th:src="@{https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js}"></script>
    <style>
        .tips{
            margin-top: 10px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
 </head>
 <body class="realestate_version">
     <!-- 网站进行动画图片 -->
     <div id="preloader">
         <img class="preloader" src="../static/web/images/loaders/loader-realestate.gif" th:src="@{/web/images/loaders/loader-realestate.gif}" alt="">
     </div>
     <!-- 导航 -->
     <header class="header header_style_01">
         <nav class="megamenu navbar navbar-default" data-spy="affix">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <!--手机端导航展开控制按钮-->
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                         <!--手机端导航图标-->
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand" ><img src="../static/web/images/logos/logo.png" th:Src="@{/web/images/logos/logo.png}" width="220" alt="image" style="height:100%" /></a>
                 </div>
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav navbar-right">
                         <block th:if="${session.user}" >
                             <li class="layui-nav-item layuimini-setting" style="color: #fff;">
                                 <input type="hidden" th:value="${session.user.id}" id="userId">
                                 感谢：
                                 <a href="javascript:;" th:text="${session.user.nickname}" id="xlmenu" style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize "></a>
                                 您的登录。
                             </li>
                             <block th:if="${session.user.type==true}">
                                 <li class="layui-nav-item layuimini-setting">
                                     <a href="javascript:;" th:href="@{/view/goAdminIndex}"  style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize ">进入后台</a>
                                 </li>
                             </block>
                         </block>
                         <li><a data-scroll href="" th:href="@{/}">首页</a></li>
                         <li><a data-scroll href="" th:href="@{/vehicle}">公交信息<span class="hidden-xs">*</span></a></li>
                         <li><a data-scroll href="" th:href="@{/view/goLogin}">登录</a></li>

                     </ul>
                 </div>
             </div>
         </nav>
     </header>

     <div id="home" class="parallax first-section" data-stellar-background-ratio="0.4" style="background-image:url('/web/uploads/parallax.jpg');">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 col-sm-12">
                     <div class="big-tagline clearfix">
                         <h2>公交系统</h2>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!--小三角-->
     <div class="sep1"></div>
     <!-- 网站信息部分 -->
     <div id="agent" class="parallax section db parallax-off" >
         <div class="container">
             <div class="section-title row text-center">
                 <div class="col-md-8 col-md-offset-2">
                     <h3>网站信息</h3>
                     <p class="lead" th:text="${info.content}">
                     </p>
                 </div>
             </div>
             <!--信息部分-->
             <div class="row">
                 <div class="col-md-2" >
                 </div>
                 <div class="col-md-6">
                     <div class="message-box">
                         <h4>公司名称</h4>
                         <h2 th:text="${info.corporateName}">公交查询系统</h2>
                         <p class="lead">公司地址:<span th:text="${info.address}">公交查询系统有限公司</span></p>
                         <p class="lead">管理者：<span th:text="${info.adminName}">王先生</span></p>
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="agencies_meta clearfix">
                         <h4 style="color:#ccc">QQ：<span th:text="${info.qq}">123456</span></h4>
                         <h4 style="color:#ccc">电话：<span th:text="${info.contactNumber}">15888888888</span></h4>
                         <h4 style="color:#ccc">微信：<span th:text="${info.vx}">15888888888</span></h4>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!--6条公交信息部分-->
     <div id="gallery" class="section wb">
         <div class="sep2"></div>
         <div class="container">
             <div class="section-title row text-center">
                 <div class="col-md-8 col-md-offset-2">
                     <h3>公交信息</h3>
                 </div>
             </div>
             <div id="da-thumbs" class="da-thumbs portfolio">
                 <div class="post-media pitem item-w1 item-h1 cat1" th:each="item : ${vehicleList}">
                     <a href="" th:href="@{/getVehicle/}+${item.id}" >
                         <img src="/web/uploads/bus.jpg" th:src="'/web/images/'+${item.id}+'.jpg'" style="width: 350px;height: 260px" alt="" class="img-responsive">
                         <div style="align-items:center; display: -webkit-flex;">
                             <p style="text-align: center;margin:0 auto;color: #fff;font-size: 32px"><span  th:text="${item.name}">asd</span>号公交车</p>
                         </div>
                     </a>
                     <div class="tips">
                         <span id="comment" th:data-id="${item.name}"><i class="layui-icon layui-icon-dialogue"></i> 评论</span>
                         <span id="collect" th:data-id="${item.name}"><i class="layui-icon layui-icon-heart"></i> 收藏</span>
                         <span id="loss" th:data-id="${item.name}"><i class="layui-icon layui-icon-face-cry"></i> 挂失</span>
                         <div id="score">
                             评分：
                             <span th:data-id="${item.name}">
                                 <i class="layui-icon layui-icon-rate" data-score="1"></i>
                                 <i class="layui-icon layui-icon-rate" data-score="2"></i>
                                 <i class="layui-icon layui-icon-rate" data-score="3"></i>
                                 <i class="layui-icon layui-icon-rate" data-score="4"></i>
                                 <i class="layui-icon layui-icon-rate" data-score="5"></i>
                             </span>
                         </div>
                     </div>
                 </div>
<!--                 <div class="post-media pitem item-w1 item-h1 cat1">-->
<!--                     <a  href="" th:href="@{/getVehicle/}+37">-->
<!--                         <img src="/web/images/bus.jpeg" alt="" class="img-responsive">-->
<!--                         <div style="align-items:center; display: -webkit-flex;">-->
<!--                             <p style="text-align: center;margin:0 auto;color: #fff;font-size: 32px"><span>23</span>号公交车</p>-->
<!--                         </div>-->
<!--                     </a>-->
<!--                 </div>-->
             </div>
             <div class="section-title row text-center">
                 <div class="col-md-8 col-md-offset-2">
                     <h3 style=""><a th:href="@{/vehicle}">更多公交信息</a></h3>
                 </div>
             </div>
         </div>
     </div>
     <!--公告部分-->
     <div id="testimonials" class="section lb">
         <div class="container">
             <div class="section-title row text-center">
                 <div class="col-md-8 col-md-offset-2">
                     <h3>公告信息</h3>
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-12 col-sm-12">
                     <div class="testi-carousel owl-carousel owl-theme">
                         <div class="testimonial clearfix" th:each="item : ${noticeList}">
                             <div class="desc">
                                 <h3 th:text="${item.title}">120车次停运公告</h3>
                                 <p class="lead" th:text="${item.content}">由于信阳站—>信阳学院的120车次，车辆出现故障，故暂时停运，运行时间待通知，望广大群众知晓理解！</p>
                             </div>
                             <div class="testi-meta">
                                 <h4 th:text="${item.time}">2021-12-19 11:31:59</h4>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!--建议-->
     <div id="support" class="section wb">
         <div class="container">
             <div class="section-title text-center">
                 <h3>说出你的建议</h3>
             </div>
             <div class="row">
                 <div class="col-md-8 col-md-offset-2">
                     <div class="contact_form">
                         <div id="message"></div>
                         <form id="contactform" class="row layui-form"  name="contactform" method="post">
                             <block th:if="${session.user}">
                                 <input type="hidden" th:value="${session.user.id}" id="userIds">
                             </block>
                             <fieldset class="row-fluid">
                                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                     <textarea class="form-control" name="content" id="comments" rows="6" placeholder="请填写建议"></textarea>
                                 </div>
                                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                                     <button type="submit" value="SEND" id="submit" class="btn btn-light btn-radius btn-brd grd1 btn-block" lay-submit lay-filter="opinionButton">提交</button>
                                 </div>
                             </fieldset>
                         </form>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!-- 底部 -->
     <div class="copyrights">
         <div class="container">
             <div class="footer-distributed">
                 <div class="footer-left">
                     <p class="footer-links">
                         <a href="#" th:href="@{/}">首页</a>
                         <a href="#" th:href="@{/vehicle}">公交信息</a>
                     </p>
                     <p class="footer-company-name">Copyright &copy; 2021.Company name All rights reserved.</p>
                 </div>

             </div>
         </div>
     </div>
     <a href="#home" data-scroll class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>

     <script src="../static/web/js/all.js" th:src="@{/web/js/all.js}"></script>
     <script src="../static/web/js/custom.js"  th:src="@{/web/js/custom.js}"></script>
     <script src="../static/web/js/portfolio.js"  th:src="@{/web/js/portfolio.js}"></script>
     <script src="../static/web/js/hoverdir.js"  th:src="@{/web/js/hoverdir.js}"></script>

 <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
 <script>
     $('.tips').on('click','#comment',function(event){
         event.preventDefault()
         var name = $(this).data('id')
         layer.open({
             type: 1, // page 层类型
             area: ['500px', '300px'],
             title: '评论',
             shade: 0.6, // 遮罩透明度
             shadeClose: true, // 点击遮罩区域，关闭弹层
             maxmin: true, // 允许全屏最小化
             anim: 0, // 0-6 的动画形式，-1 不开启
             content: '<div style="padding: 32px 20px 10px;"><textarea style="width: 100%" className="form-control" name="content" id="comments1" rows="6" placeholder="请填写评论"></textarea></div><button type="submit" value="SEND" id="submit1" class="btn btn-light btn-radius btn-brd grd1 btn-block" lay-filter="opinionButton">提交</button>'
         });
         $('#submit1').on('click',function(){
             console.log($('#comments1').val())
             var id=$("#userIds").val();
             var text='对'+name+'进行了评论,评论内容：'+$('#comments1').val()
             if (isNaN(id)){
                 id=-1;
             }
             $.ajax({
                 type:"post",
                 url:"/opinion/addOpinion",
                 data:{userId:id,content : text,contentType:3},
                 dataType:"json",
                 success : function (data) {
                     if (data.code === "200") {
                         layer.msg('操作成功',{icon:1,time:1500});
                         layer.closeAll()
                     }else {
                         layer.msg('操作失败',{icon:2,time:1500});
                     }
                 }
             })
         })
     })
     $('.tips').on('click','#loss',function(event){
         event.preventDefault()
         var name = $(this).data('id')
         layer.open({
             type: 1, // page 层类型
             area: ['500px', '300px'],
             title: '挂失物品',
             shade: 0.6, // 遮罩透明度
             shadeClose: true, // 点击遮罩区域，关闭弹层
             maxmin: true, // 允许全屏最小化
             anim: 0, // 0-6 的动画形式，-1 不开启
             content: '<div style="padding: 32px 20px 10px;"><textarea style="width: 100%" className="form-control" name="content" id="comments2" rows="6" placeholder="请描述物品丢失过程、物品信息及失主联系方式"></textarea></div><button type="submit" value="SEND" id="submit2" class="btn btn-light btn-radius btn-brd grd1 btn-block" lay-filter="opinionButton">提交</button>'
         });
         $('#submit2').on('click',function(){
             var id=$("#userIds").val();
             var text='在'+name+'登记物品挂失,登记内容：'+$('#comments2').val()
             if (isNaN(id)){
                 id=-1;
             }
             $.ajax({
                 type:"post",
                 url:"/opinion/addOpinion",
                 data:{userId:id,content : text,contentType:4},
                 dataType:"json",
                 success : function (data) {
                     if (data.code === "200") {
                         layer.msg('操作成功',{icon:1,time:1500});
                         layer.closeAll()
                     }else {
                         layer.msg('操作失败',{icon:2,time:1500});
                     }
                 }
             })
         })
     })
     $('.tips').on('click','#collect',function(event){
         event.preventDefault()
         var text='收藏了11路公交'
         if($(this).find('i').hasClass('layui-icon-heart')){
             $(this).find('i').removeClass('layui-icon-heart')
             $(this).find('i').addClass('layui-icon-heart-fill')
             text = '收藏了'+$(this).data('id')+'公交车'
         } else {
             $(this).find('i').addClass('layui-icon-heart')
             $(this).find('i').removeClass('layui-icon-heart-fill')
             text = '取消收藏'+$(this).data('id')+'公交车'
         }
         var id=$("#userIds").val();
         if (isNaN(id)){
             id=-1;
         }
         $.ajax({
             type:"post",
             url:"/opinion/addOpinion",
             data:{userId:id,content : text,contentType:2},
             dataType:"json",
             success : function (data) {
                 if (data.code === "200") {
                     layer.msg('操作成功',{icon:1,time:1500});
                 }else {
                     layer.msg('操作失败',{icon:2,time:1500});
                 }
             }
         })
     })
     $('.tips').on('click','#score>span>i',function(event){
         event.preventDefault()
         var text='对'+$(this).parent().data('id')+'进行了评分,分值：'+$(this).data('score')
         var id=$("#userIds").val();
         if (isNaN(id)){
             id=-1;
         }
         var html = ''
         for(var i=0;i<$(this).data('score');i++){
             html+='<i class="layui-icon layui-icon-rate-solid" data-score="'+(i+1)+'"></i>'
         }
         for(var i=0;i<(5-$(this).data('score'));i++){
             html+='<i class="layui-icon layui-icon-rate" data-score="'+($(this).data('score')+i+1)+'"></i>'
         }
         $(this).parent().html(html)
         $.ajax({
             type:"post",
             url:"/opinion/addOpinion",
             data:{userId:id,content : text,contentType:1},
             dataType:"json",
             success : function (data) {
                 if (data.code === "200") {
                     layer.msg('操作成功',{icon:1,time:1500});
                 }else {
                     layer.msg('操作失败',{icon:2,time:1500});
                 }
             }
         })
     })
     layui.use(['layer', 'form','dropdown'], function(){
         var layer = layui.layer
             ,form = layui.form;
         var dropdown = layui.dropdown;
         var $ = layui.jquery;
         /*意见表单提交*/
         form.on('submit(opinionButton)',function (data) {
             var maintenancePlace = JSON.stringify(data.field);
             var id=$("#userIds").val();
             console.log(maintenancePlace)
             if (isNaN(id)){
                 id=-1;
                 console.log(id)
             }
             $.ajax({
                 type:"post",
                 url:"/opinion/addOpinion",
                 data:{userId:id,content : data.field.content,contentType:0},
                 dataType:"json",
                 success : function (data) {
                     if (data.code === "200") {
                         layer.msg(data.message,{icon:1,time:1500});
                     }else {
                         layer.msg(data.message,{icon:2,time:1500});
                     }
                 }
             })
             return false;
         })

         /*个人信息弹出层*/
         var setTop=function (url) {
             var that = this;
             //多窗口模式，层叠置顶
             layer.open({
                 type: 2 //此处以iframe举例
                 ,
                 title: '个人信息'
                 ,
                 area: [$(window).height()*0.8+'px', $(window).width()*0.4 +'px']
                 ,
                 shade: 0
                 ,
                 maxmin: true
                 ,
                 offset: '100px'
                 ,
                 content:[url, 'no']
                 ,

                 yes: function () {
                     $(that).click();
                 }
                 ,
                 btn2: function () {
                     layer.closeAll();
                 }
                 ,
                 zIndex: layer.zIndex //重点1
                 ,
                 success: function (layero, index) {
                     layer.setTop(layero); //重点2. 保持选中窗口置顶
                     //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                     layer.escIndex = layer.escIndex || [];
                     layer.escIndex.unshift(index);
                     //选中当前层时，将当前层索引放置在首位
                     layero.on('mousedown', function () {
                         var _index = layer.escIndex.indexOf(index);
                         if (_index !== -1) {
                             layer.escIndex.splice(_index, 1); //删除原有索引
                         }
                         layer.escIndex.unshift(index); //将索引插入到数组首位
                     });
                 }
                 ,
                 end: function () {
                     //更新索引
                     if (typeof layer.escIndex === 'object') {
                         layer.escIndex.splice(0, 1);
                     }
                 }
             });
         }

         /*下拉菜单*/
         dropdown.render({
             elem: '#xlmenu' //可绑定在任意元素中，此处以上述按钮为例
             ,data: [
                 {
                 title: '个人信息'
                 ,id: 1
                 ,href: '#'
                }, {
                 title: '公交卡充值'
                 ,id: 102
                 ,href: '#'
                },
                {
                 title: '退出登录'
                 ,id: 101
                 ,href: '/login/logout' //开启超链接
                }
             ]
             ,id: 'demo1'
             //菜单被点击的事件
             ,click: function(obj){
                 /*弹出个人信息弹窗*/
                 if (obj.id===1) {
                     var id=$("#userId").val();
                     var url='/goUser/'+id;
                   console.log($(window).height())
                    setTop(url)
                 }
                 if (obj.id===102) {
                     layer.photos({
                         photos: {
                             "title": "Photos Demo",
                             "start": 0,
                             "data": [
                                 {
                                     "alt": "充值",
                                     "pid": 1,
                                     "src": "/web/images/211.png",
                                 }
                             ]
                         }
                     });
                 }
             }
         });
     });

 </script>
 </body>
 </html>
